 {template 'pc_header'}
<link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/app/css/screen_wall.css">
<style>
</style> 
<script src="{MODULE_URL}template/mobile/app/js/basic2.js?t={php echo time()}" type="text/javascript" charset="utf-8"></script>
<script src="{MODULE_URL}template/mobile/app/js/screen_wall.js?t={php echo time()}" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.jbshow{position: fixed; opacity:0; display:none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;font-size:32px;box-sizing: border-box;padding:0;}
.jbshow p{ padding:0; margin:0 auto;}
.jbshow .jbleft{ width:100%; height:100%; text-align:center;
border-radius: 10px;overflow: hidden; position:relative; opacity:0}
.jbshow .jbmz{ padding: 25px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.45);
color: #fff;opacity:0}
.jbshow .closeico{
position: absolute;
display: block;
width: 40px;
height: 40px;
right: 6px;
top: 6px;
background: rgba(0, 0, 0,0.8);
border-radius: 100%;
text-indent: -9999px;
z-index: 3;cursor:pointer;
}
.jbshow .closeico:hover{
background: rgba(0, 177, 7, 1);
}
.jbshow .closeico:before {
position: absolute;
top: 6px;
left: 19px;
content: "";
display: block;
width: 2px;
height: 30px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}
.jbshow .closeico:after {
position: absolute;
top: 20px;
left: 5px;
content: "";
display: block;
width: 30px;
height: 2px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}

.jbshow .fxtx{
position: absolute;
top: 10px;
left: 10px;
height: 60px;
overflow: hidden;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.95);
text-align: left;z-index: 10; opacity:0;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.jbshow .fxtx img{
width: 50px;
height: 50px;
border-radius: 100%;
margin: 5px;
float: left;
}
.jbshow .fxtx .fsmz{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 60px;
color: #000;
font-size: 24px;
display: block;
text-align: left;
margin-left:60px;padding: 0 15px 0 10px;
}
.jbshow.view {-webkit-animation:nn 1.5s 0s ease forwards; -moz-animation:1.5s 0s ease forwards ; display: block}
.jbshow.view .jbleft{-webkit-animation:bb 2s 0.5s ease forwards; -moz-animation:2s 0.5s ease forwards ; display: block}
.jbshow.view .jbmz{-webkit-animation:nn 2s 1.5s ease forwards; -moz-animation:2s 1.5s ease forwards ; display: block}
.jbshow.view .fxtx{-webkit-animation:nn 2s 1.5s ease forwards; -moz-animation:2s 1.5s ease forwards ; display: block}
@-webkit-keyframes nn{
0%{ opacity:0; }
50%{opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes bb{
0%{ -webkit-transform: scale(0);opacity:0; }
50%{-webkit-transform: scale(1);opacity:1;}
100%{-webkit-transform:  scale(1);opacity:1;}
}
.jbshow.view2 {-webkit-animation:mm 1.5s 0s ease forwards; -moz-animation:1.5s 0s ease forwards ; display:block}
.jbshow.view2 .jbleft{opacity:1}
@-webkit-keyframes mm{
0%{ opacity:1;}
100%{opacity:0;}
}
</style>
<body class="FUN WALL" {if !empty($basic_config['bg_vedio'])}data-vide-bg="{php echo tomedia($basic_config['bg_vedio'])}"{/if}>
<div class="jbshow  ">
   <b class="closeico">关闭</b><div class="fxtx"><img id="hdimg" src=""><span  id="zsmc" class="fsmz"></span></div>
   <div class="jbleft" style=""><p class="jbmz"></p></div>
</div>   
{template 'top_panel'}
<div class="Panel MsgList"  >
    <div class="MsgItem" msg_id="meepo" style="margin-bottom: 7.5px; display: block;">
        <div class="head" style="width: 119px; height: 119px; top: 20px; left: 20px; background-image: url(http://wx.qlogo.cn/mmopen/ctSue0WnfibLR4ponCgXLv4G9Y43YFEXv5UboZuvHbvwkz6QXEYvw4RyuktMxhicq22efPTnwhPRhT67FIia2dmKDlIb4falNbN/0);"></div>
        <div class="nickname" style="width: 1256px; height: 29.75px; top: 20px; left: 159px; font-size: 27px;">赞木</div>
        <div class="msgword" style="width: 1256px; height: 69.25px; top: 69.75px; left: 159px; font-size: 62px;">1</div>
		<div class="infostyle-show" msg_id="12345"><span class="cotrol-style"></span></div>

    </div>
    <div class="MsgItem" msg_id="meepo" style="margin-bottom: 0px; display: block;">
        <div class="head" style="width: 119px; height: 119px; top: 20px; left: 20px; background-image: url(http://wx.qlogo.cn/mmopen/ctSue0WnfibLR4ponCgXLv4G9Y43YFEXv5UboZuvHbvwkz6QXEYvw4RyuktMxhicq22efPTnwhPRhT67FIia2dmKDlIb4falNbN/0);"></div>
        <div class="nickname" style="width: 1256px; height: 29.75px; top: 20px; left: 159px; font-size: 27px;">赞木</div>
        <div class="msgword" style="width: 1256px; height: 69.25px; top: 69.75px; left: 159px; font-size: 63px;">2</div>
		<div class="infostyle-show" msg_id="12345"><span class="cotrol-style"></span></div>

    </div>
	<div class="MsgItem" msg_id="meepo" style="margin-bottom: 7.5px; visibility: visible;">
        <div class="head" style="width: 119px; height: 119px; top: 20px; left: 20px; background-image: url(http://wx.qlogo.cn/mmopen/ctSue0WnfibLR4ponCgXLv4G9Y43YFEXv5UboZuvHbvwkz6QXEYvw4RyuktMxhicq22efPTnwhPRhT67FIia2dmKDlIb4falNbN/0);"></div>
        <div class="nickname" style="width: 1256px; height: 29.75px; top: 20px; left: 159px; font-size: 27px;">赞木</div>
        <div class="msgword" style="width: 1256px; height: 69.25px; top: 69.75px; left: 159px; font-size: 62px;">3</div>
		<div class="infostyle-show" msg_id="12345"><span class="cotrol-style"></span></div>
    </div>
</div>  
<style>
.infostyle-show{
    text-align: center;
}
.infostyle-show{
    line-height: 100%;
}
.MsgList div:hover .infostyle-show {
    display: block;
}
.infostyle-show {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: -6px 0 30px rgba(0,0,0,.4);
    display: none;
}
.cotrol-style {
    position: absolute;
	 width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 32px;
    line-height: 32px;
    display: block;
	background: url({MODULE_URL}template/mobile/app/images/next.png) center no-repeat;
    background-size: contain;
    cursor: pointer;
}
.infostyle-show {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: -6px 0 30px rgba(0,0,0,.4);
    display: none;
}
</style>
<script>
</script>
<div class="detail" style="display: none;">
	<img class="close" src="{MODULE_URL}template/mobile/app/images/close.png">
	<div class="top">
		<div class="header"><span></span></div>
		<div class="name">赞木</div>
	</div>
	<div class="bottom">13975325125</div>
</div>
<style>
.detail_Css{
    top: 110px;
    bottom: 81px;
    width: 96%;
    left: 50%;
    margin-left: -48%;
	
   
}
.detail {
	position: absolute;
	background-color: rgb(255, 255, 255);
	display: none;
	border-radius:2px;
}

.detail .close {
	position: absolute;
	top: 10px;
	right: 13px;
	cursor: pointer;
}

.detail .top {
	overflow: hidden;
	width: 88%;
	margin-left: 6%;
	border-bottom: 1px solid gray;
	height: 150px;
	line-height: 150px;
}

.detail .top .header {
	background: url('{MODULE_URL}template/mobile/app/images/header_border.png') center no-repeat;
	background-size: 100px 100px;
	height: 100px;
	width: 100px;
	padding-top: 2px;
	float: left;
	margin-top: 33px;
}

.detail .top .header span {
	display: block;
	background: url('{MODULE_URL}template/mobile/app/images/header.jpg') white center no-repeat;
	background-size: cover;
	border-radius: 50px;
	width: 85px;
	height: 85px;
	margin-top: 7px;
	margin-left: 7.5px;
}

.detail .top .name {
	color: #e8023c;
	font-size: 28px;
	text-align: center;
	
	float: left;
	font-weight: bold;
	margin-left: 15px;
}

.detail .bottom {
	width: 90%;
	font-size: 30px;
	color: #E8023C;
	padding: 15px 62px;
	padding-right: 0;
	padding-top: 0;
	margin-top: 15px;
	font-weight: bold;
	height: 250px;
	word-break: break-all;
	overflow: hidden;
}

.detail .bottom .only_img{
	max-height: 250px;
	margin-top: 1%;

}
.fans_img{width:40px;height:40px}
</style>
<script>
$(function(){
	$('body').on('click','.infostyle-show',function(){
			var _this = $(this);
			clearInterval(show_msg_2);
			var avatar = _this.siblings('.head').css("background-image");
			$(".detail .header span").css({"background-image":avatar});
			$(".detail .name").html(_this.siblings('.nickname').text());
			
			$(".detail .bottom").html(_this.siblings('.msgword').html());
			if($(".detail .bottom").find('.fans_img').length>0){
				$(".detail .bottom").find('.fans_img').attr('class','only_img')
			}
			$(".detail").css({"width":$(".MsgItem").width()+10,"height":$(".MsgList").height()});
			$(".detail").addClass('detail_Css');
			$(".detail").show();
		})
});
</script>
{template 'pc_footer'}